<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>Nombre</title>
		
		<?php 
	    	echo $html->css('estilo');
			echo $this->Html->script('jquery-1.6.2.min'); 
			echo $this->Html->script('googleMap');
			echo $this->Html->script('http://maps.google.com/maps/api/js?sensor=false');
			echo $this->Html->script('jquery.blockUI');
	    ?>
		
		<?php echo $scripts_for_layout ?>
	</head>
	
	<body>
		<div id="wrap">
			<div class="block_header">
				<div class="imagen_izq"></div>
			</div>
			
			<div class="menu_superior">
				
				<div class="bloques_opciones" id="bloque_login" style="display: none">
					<div class="titulo_login">
						Ingrese sus Datos
					</div>
					<div class="fila_login">
						<div class="label_login"><span>Nombre: </span> </div>
						<div class="input_login"><input id="input_nombre" type="text" value=""/></div>
					</div>
					<div class="fila_login">
						<div class="label_login"><span>Contraseña: </span> </div>
						<div class="input_login"><input id="input_pass"  type="text" value=""/></div>
					</div>
					<div class="fila_login">
						<div class="button_login"><button> Entrar </button></div>
					</div>
					<div class="fila_login">
						<div class="recordar_login">
							<a>Recordar Contraseña</a>
						</div>
					</div>
				</div>
				
				
				
				<div class="bloques_opciones" id="bloque_buscar" style="display: none">
					
					<div class="fila_buscar">
					<div class="label_buscar_corto">Raza: </div>
						<div class="select_buscar">
							<select>
								  <option value="volvo">American Staffordsire Terrier</option>
								  <option value="saab">Saab</option>
								  <option value="mercedes">Mercedes</option>
								  <option value="audi">Audi</option>
							</select>
						</div> 
					</div>
					
					<div class="fila_buscar">
						<div class="label_buscar_largo">Categoria: </div>
						<div class="select_buscar">
							<select>
								  <option value="volvo">PPPPPPP</option>
								  <option value="saab">dsadsadsa</option>
								  <option value="mercedes">dssad</option>
								  <option value="audi">dsadsa</option>
							</select>
						</div>
					</div>
					
					<div class="fila_buscar">
						<div class="label_buscar_corto">Sexo: </div>
						<div class="select_buscar">
							<select>
								  <option value="volvo">Hembra</option>
								  <option value="saab">Macho</option>
							</select>
						</div> 
					</div>
					
					
					<div class="fila_buscar">
						<div class="button_buscar">
							<button> Buscar</button>
				</div>
					</div>
					
					
					
					
				</div>
				
			
				
					<div class="SECC_op_menu parte_der">
						<div style=""><a>Registrarse</a></div>
					</div>
					<div class="SECC_op_menu parte_der">
						<div id = "login"  style=""><a>Ingresar</a></div>
					</div>
					
					<div class="SECC_op_menu parte_izq">
						<div><a>Inicio</a></div>
					</div>
					
					<div class="SECC_op_menu parte_izq">
						<div id="buscar"><a>Buscar</a></div>
					</div>
				
			</div>
			
			<div class="block_body">
				<div class="menu_v">
					<div class="SEC_menu_v">
						<div class="titulo">Ver</div>
						<div class="resto">
							<div class="opc_menu_v"><a>Perdidos</a></div>
							<div class="opc_menu_v"><a>Encontrados</a></div>
							<div class="opc_menu_v"><a>Adopcion</a></div>
							<div class="opc_menu_v"><a>Busco Novio</a></div>
							<div class="opc_menu_v"><a>Busco Novia</a></div>
						</div>
					</div>
					
					<div class="SEC_menu_v">
						<div class="titulo">Donde Recurrir</div>
						<div class="resto">
							<div class="opc_menu_v"><a>Veterinarias</a></div>
							<div class="opc_menu_v"><a>Hogares de Transito</a></div>
							<div class="opc_menu_v"><a>ONG</a></div>
						</div>
					</div>
				</div>
				<?php echo $content_for_layout ?>
			</div>

			
			
			<div class="block_pie">
				
			</div>
			
		</div>
		
		
		
		
		<script type="text/javascript">
			$(document).ready(function(){
/************************* Efectos Menu LOGIN ************************************************************************/

				$("#login a").live("click", function(){
					if ($(this).html() == "Ocultar"){
						$("#bloque_login").attr("style","display: none");
						$(this).parent().attr("style","background:''");
						$(this).html("Ingresar");
					}else{
						$("#bloque_login").attr("style","display: block");
						$(this).parent().attr("style","background: #ECE180; border: 1px double #000;border-bottom: none;");
						$(this).html("Ocultar");
					}
				});
				
/************************* Efectos menu buscar *****************************************/
				
				$("#buscar a").live("click", function(){
					if ($(this).html() == "Ocultar"){
						$("#bloque_buscar").attr("style","display: none");
						$(this).parent().attr("style","background:''");
						$(this).html("Buscar");
					}else{
						$("#bloque_buscar").attr("style","display: block");
						$(this).parent().attr("style","background: #ECE180; border: 1px double #000;border-bottom: none;");
						$(this).html("Ocultar");
					}
				});

				
/************************* Clock afuera y sale del bloque login *****************************************/				
				
				$(".container_16").click(function(){
					$("#bloque_login").attr("style","display: none");
					$("#login a").parent().attr("style","background:''");
					$("#login a").html("Ingresar");
				});
				
			});
	
		</script>
		
	</body>
</html>	